<template>
  <div>
    <alert v-model="alertShow.showmsg" :title="'提示'" @on-show="onShow" @on-hide="onHide">{{alertShow.msg}}</alert>
    <x-header style="background-color:#3d82e5;width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="{showBack: true}">
      <p name="content">兑换商品</p>
    </x-header>
    <div :style="boxStyle" >
      <div style="margin-bottom: 60px;">
        <swiper :list="demoList" :height=imgHw :auto="true" dots-position="center"></swiper>
        <flexbox  :gutter="0" wrap="wrap" style="background-color: #ffffff;padding-top: 10px;">
          <flexbox-item :span="9">
            <div style="padding-left: 10px">
              <p style="font-size: 14px">{{shopInfoData.desc}}</p>
              <p style="text-align:left;color: #fa0000;">{{shopInfoData.pointPrice}}积分</p>
            </div>
          </flexbox-item>
          <flexbox-item :span="3">
            <!--<table class="table_text" style="text-align: center">-->
              <!--<tr  class="table_text_tr" v-if="shopInfoData.like === false" @click="collectionFn">-->
                <!--<img src="../../../../src/assets/images/shopMall/icon_wdsc.png" >-->
                <!--<p>收藏</p>-->
              <!--</tr>-->
              <!--<tr style="color: #fa0000" class="table_text_tr" v-if="shopInfoData.like === true" >-->
                <!--<img  src="../../../../src/assets/images/shopMall/icon_zan.png" >-->
                <!--<p style="text-align: center">已收藏</p>-->
              <!--</tr>-->
            <!--</table>-->
          </flexbox-item>
          <!--<flexbox-item :span="12">-->
            <!--<flexbox :gutter="0" wrap="nowrap">-->
              <!--<flexbox-item :span="11" style="text-align: right">-->
                <!--<h5 style="font-size: 15px;text-align: center;color: #999999;display: inline-block">收藏量</h5>-->
                <!--<h5 style="font-size: 15px;text-align: center;color: #fa0000;display: inline-block">{{shopInfoData.likeCount}}</h5>-->
              <!--</flexbox-item>-->
            <!--</flexbox>-->
          <!--</flexbox-item>-->
        </flexbox>
        <!--<flexbox :gutter="0" wrap="nowrap" style="background-color: #ffffff">-->
        <!--<flexbox-item :span="3"><p style="font-size: 14px">孝行通精选</p></flexbox-item>-->
        <!--<flexbox-item :span="9"><p style="font-size: 5px">介绍文字介绍文字介绍文字介绍文介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字介绍文字</p></flexbox-item>-->
        <!--</flexbox>-->
        <div style="padding: 10px 0;font-size: 0">
          <img src="../../../../src/assets/images/shopMall/banner_ppcl@2x.png" width="100%">
        </div>
        <group label-width="4em" label-margin-right="2em" label-align="right" gutter="0">
          <x-input v-for="item in valList" readonly="readonly" :title="item.label" :placeholder="item.value" v-model="value3"   ></x-input>
        </group>
        <div>
          <img v-for="item in shopInfoData.itemDetailImg"  :src="item" style="width:100%;display:block">
        </div>
      </div>
    </div>
    <div>
      <tab :animate="false" style="height: 40px">
        <tab-item></tab-item>
        <tab-item @click.native="buyShopFn" style="background-color: #f95320;color: #ffffff" >立即兑换</tab-item>
      </tab>
    </div>
  </div>
</template>
<script>
  import { Swiper, Flexbox, FlexboxItem, XButton, Group, Scroller, FormPreview, Alert, Tab, TabItem, XHeader, XInput } from 'vux'
  import * as urls from '../../../api/urls'
  import * as types from '../../../store/types'

  export default {
    components: {
      Swiper,
      Flexbox,
      FlexboxItem,
      XButton,
      Group,
      Scroller,
      FormPreview,
      Alert,
      Tab,
      TabItem,
      XHeader,
      XInput
    },
    mounted: function () {
      document.getElementsByClassName('weui_tabbar')[0].style.display = 'none'
      document.getElementsByClassName('weui_tab_bd')[0].style.paddingBottom = '0'
      let width = document.body.clientWidth
      let heigth = (parseInt(width) / 100) * 65
      this.imgHw = heigth + 'px'
      this.shopId = window.localStorage.getItem('shopId')
      document.getElementsByClassName('weui_tab_bd')[0].style.overflowY = 'hidden'
      let clientHeight = parseInt(document.body.clientHeight)
      this.boxStyle = 'overflow-x: hidden;overflow-y: auto;height: ' + (clientHeight - 38) + 'px'
      this.getInfoList()
      this.weixinfn42()
    },
    data () {
      return {
        alertShow: {
          showmsg: false,
          msg: ''
        },
        boxStyle: 'height: 300px;overflow-x: hidden;overflow-y: auto;',
        shopInfoData: {
          pointPrice: '',
          likeCount: '',
          desc: '',
          itemDetailImg: '',
          like: false
        },
        imgHw: '',
        shopHeigth: '',
        shopId: '',
        valList: [],
        demoList: []
      }
    },
    methods: {
      weixinfn42 () {
        let that = this
        let userId = this.$store.state.userInfo.id
        let logo = this.$store.state.empower.LOGO
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      },
      getInfoList () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.shopDetail, {userId: userId, id: that.shopId}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.desc = res.data.item.desc
            that.shopInfoData.likeCount = res.data.item.likeCount
            that.shopInfoData.pointPrice = res.data.item.pointPrice
            that.shopInfoData.itemDetailImg = res.data.item.itemDetailImg
            that.shopInfoData.like = res.data.item.like
            if (res.data.item.itemBannerImg.length !== 0) {
              for (let i = 0; i < res.data.item.itemBannerImg.length; i++) {
                let bannerObj = {}
                bannerObj.img = res.data.item.itemBannerImg[i]
                that.demoList.push(bannerObj)
              }
            }
            if (res.data.item.propertis.length !== 0) {
              for (let i = 0; i < res.data.item.propertis.length; i++) {
                let valObj = {}
                valObj.label = res.data.item.propertis[i].name
                valObj.value = res.data.item.propertis[i].value
                that.valList.push(valObj)
              }
            }
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      collectionFn () {
        let userId = this.$store.state.userInfo.id
        let that = this
        this.http(urls.shopLike, {userId: userId, itemId: parseInt(that.shopId)}, function (res) {
          if (res.status === 100) {
            that.shopInfoData.like = true
          } else {
            that.alertShow.showmsg = true
            that.alertShow.msg = res.errMsg
          }
        }, function (res) {
          that.alertShow.showmsg = true
          that.alertShow.msg = res
        })
      },
      buyShopFn () {
        let itemId = parseInt(this.shopId)
        this.$store.commit(types.EMPOWER, {isPointBuy: 1})
        this.$store.commit(types.EMPOWER, {addressLuckType: true})
        this.$router.push({
          path: '/shoppingCar/SelectAddress',
          query: {
            itemId: itemId
          }
        })
        this.$router.go(1)
      },
      onShow () {
        // 弹窗出现时触发
      },
      onHide () {
        // 弹窗关闭时触发
      }
    }
  }
</script>
<style>
  .table_text{
    border-left: 1px solid #d9d9d9;
    height: 40px
  }
  .table_text_tr{
    float: left;
    padding: 10px
  }
</style>
